<!--
 * @author: 十一
 * @since: 2024-08-27
 * Drawer.vue
 * @desc: new page
-->
<template>
  <a-drawer
    v-model:open="open"
    :destroyOnClose="true"
    :maskClosable="false"
    width="500"
    class="custom-class"
    root-class-name="root-class-name"
    :title="props.drawerOptions.title"
    placement="right"
    @after-open-change="afterOpenChange"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item
        ref="username"
        label="姓名"
        name="username"
        placeholder="请输入姓名"
      >
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.username }}
        </div>
        <a-input v-model:value="formState.username" v-else />
      </a-form-item>
      <a-form-item label="角色" name="roles">
        <div v-if="props.drawerOptions.state == 2">{{ formState.roles }}</div>
        <a-select
          v-else
          v-model:value="formState.roles"
          mode="tags"
          :disabled="props.drawerOptions.state == 2"
          placeholder="请选择角色"
        >
          <a-select-option value="0">超级管理员</a-select-option>
          <a-select-option value="1">管理员</a-select-option>
          <a-select-option value="2">普通用户</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.status == 0 ? "启用" : "禁用" }}
        </div>
        <a-switch
          v-else
          v-model:checked="formState.status"
          :disabled="props.drawerOptions.state == 2"
        />
      </a-form-item>
      <a-form-item
        :wrapper-col="{ span: 20, offset: 4 }"
        v-if="props.drawerOptions.state != 2"
      >
        <a-button type="primary" @click="onSubmit">提交</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { reactive, toRaw } from "vue";
import type { UnwrapRef } from "vue";
import type { Rule } from "ant-design-vue/es/form";
import { DataEcho } from "@/utils/dataEcho";
const open = ref<boolean>(false);
// 接收父组件的参数
const props = defineProps(["drawerOptions"]);
//切换抽屉时动画结束后的回调
const afterOpenChange = (bool: boolean) => {
  console.log("open", bool);
  if (bool) {
    // 打开抽屉
    // 获取父组件传递过来的参数
    const { options } = props.drawerOptions;
    DataEcho(formState, options);
  } else {
    formRef.value.resetFields();
  }
};
interface FormState {
  id: string;
  avatar: string;
  username: string;
  roles: number[];
  status: number;
}
const formRef = ref();
const labelCol = { span: 4 };
const wrapperCol = { span: 20 };
const formState: UnwrapRef<FormState> = reactive({
  id: "",
  avatar: "",
  username: "",
  roles: [],
  status: 0,
});
const rules: Record<string, Rule[]> = {
  //   username: [
  //     {
  //       required: true,
  //       message: "Please input Activity name",
  //       trigger: "change",
  //     },
  //     { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  //   ],
};
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log("values", formState, toRaw(formState));
    })
    .catch((error: any) => {
      console.log("error", error);
    });
};

const resetForm = () => {
  formRef.value.resetFields();
};
//暴露给父组件
defineExpose({ open });
</script>

<style scoped></style>
